<template>
    <div class="weather-alert-notification">
        <div class="alert-header">
            <h3 class="alert-title">
                <span class="alert-icon">🚨</span>
                天气预警通知
            </h3>
            <div class="alert-controls">
                <button @click="refreshAlerts" class="refresh-btn">
                    🔄 刷新
                </button>
                <button @click="toggleAutoRefresh" class="auto-refresh-btn" :class="{ active: autoRefresh }">
                    {{ autoRefresh ? '⏸️ 暂停' : '▶️ 自动' }}
                </button>
            </div>
        </div>

        <!-- 预警统计 -->
        <div class="alert-summary">
            <div class="summary-item">
                <div class="summary-icon">⚠️</div>
                <div class="summary-content">
                    <div class="summary-value">{{ getAlertCount('warning') }}</div>
                    <div class="summary-label">黄色预警</div>
                </div>
            </div>
            <div class="summary-item">
                <div class="summary-icon">🚨</div>
                <div class="summary-content">
                    <div class="summary-value">{{ getAlertCount('danger') }}</div>
                    <div class="summary-label">红色预警</div>
                </div>
            </div>
            <div class="summary-item">
                <div class="summary-icon">💙</div>
                <div class="summary-content">
                    <div class="summary-value">{{ getAlertCount('info') }}</div>
                    <div class="summary-label">蓝色预警</div>
                </div>
            </div>
            <div class="summary-item">
                <div class="summary-icon">🟠</div>
                <div class="summary-content">
                    <div class="summary-value">{{ getAlertCount('orange') }}</div>
                    <div class="summary-label">橙色预警</div>
                </div>
            </div>
        </div>

        <!-- 预警列表 -->
        <div class="alerts-list">
            <div v-if="filteredAlerts.length === 0" class="no-alerts">
                <div class="no-alerts-icon">✅</div>
                <div class="no-alerts-text">当前暂无天气预警</div>
            </div>

            <div v-for="alert in filteredAlerts" :key="alert.id" class="alert-item" :class="alert.level"
                @click="showAlertDetail(alert)">
                <div class="alert-level-badge">
                    {{ getAlertLevelText(alert.level) }}
                </div>

                <div class="alert-content">
                    <div class="alert-title">{{ alert.title }}</div>
                    <div class="alert-description">{{ alert.description }}</div>
                    <div class="alert-meta">
                        <span class="alert-time">{{ formatDateTime(alert.time) }}</span>
                        <span class="alert-location">{{ alert.location }}</span>
                        <span class="alert-validity">有效期至: {{ formatDateTime(alert.validUntil) }}</span>
                    </div>
                </div>

                <div class="alert-actions">
                    <button @click.stop="markAsRead(alert.id)" class="action-btn read-btn">
                        {{ alert.isRead ? '✓ 已读' : '👁️ 标记已读' }}
                    </button>
                    <button @click.stop="dismissAlert(alert.id)" class="action-btn dismiss-btn">
                        ×
                    </button>
                </div>
            </div>
        </div>

        <!-- 预警详情模态框 -->
        <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
            <div class="modal-content" @click.stop>
                <div class="modal-header">
                    <h3 class="modal-title">预警详情</h3>
                    <button @click="closeDetailModal" class="modal-close">×</button>
                </div>
                <div class="modal-body" v-if="selectedAlert">
                    <div class="detail-section">
                        <h4>预警信息</h4>
                        <div class="detail-grid">
                            <div class="detail-item">
                                <span class="detail-label">预警级别:</span>
                                <span class="detail-value" :class="selectedAlert.level">
                                    {{ getAlertLevelText(selectedAlert.level) }}
                                </span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">预警类型:</span>
                                <span class="detail-value">{{ selectedAlert.type }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">发布时间:</span>
                                <span class="detail-value">{{ formatDateTime(selectedAlert.time) }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">有效期至:</span>
                                <span class="detail-value">{{ formatDateTime(selectedAlert.validUntil) }}</span>
                            </div>
                            <div class="detail-item">
                                <span class="detail-label">影响区域:</span>
                                <span class="detail-value">{{ selectedAlert.location }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="detail-section">
                        <h4>预警详情</h4>
                        <p class="detail-description">{{ selectedAlert.description }}</p>
                    </div>

                    <div class="detail-section">
                        <h4>防护建议</h4>
                        <ul class="protection-list">
                            <li v-for="(advice, index) in selectedAlert.protectionAdvice" :key="index">
                                {{ advice }}
                            </li>
                        </ul>
                    </div>

                    <div class="detail-section">
                        <h4>相关链接</h4>
                        <div class="related-links">
                            <a v-for="link in selectedAlert.relatedLinks" :key="link.url" :href="link.url"
                                target="_blank" class="link-item">
                                {{ link.title }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

interface WeatherAlert {
    id: string
    level: 'info' | 'warning' | 'danger' | 'orange'
    type: string
    title: string
    description: string
    location: string
    time: Date
    validUntil: Date
    isRead: boolean
    protectionAdvice: string[]
    relatedLinks: { title: string; url: string }[]
}

const alerts = ref<WeatherAlert[]>([])
const autoRefresh = ref(true)
const showDetailModal = ref(false)
const selectedAlert = ref<WeatherAlert | null>(null)
const filterLevel = ref<string>('all')

let refreshInterval: number | null = null

// 计算属性
const filteredAlerts = computed(() => {
    if (filterLevel.value === 'all') {
        return alerts.value
    }
    return alerts.value.filter(alert => alert.level === filterLevel.value)
})

// 生命周期
onMounted(() => {
    generateMockAlerts()
    startAutoRefresh()
})

onUnmounted(() => {
    stopAutoRefresh()
})

// 自动刷新
const startAutoRefresh = () => {
    if (refreshInterval) {
        clearInterval(refreshInterval)
    }

    if (autoRefresh.value) {
        refreshInterval = setInterval(() => {
            refreshAlerts()
        }, 2 * 60 * 1000) // 2分钟
    }
}

const stopAutoRefresh = () => {
    if (refreshInterval) {
        clearInterval(refreshInterval)
        refreshInterval = null
    }
}

const toggleAutoRefresh = () => {
    autoRefresh.value = !autoRefresh.value
    if (autoRefresh.value) {
        startAutoRefresh()
    } else {
        stopAutoRefresh()
    }
}

// 生成模拟预警数据
const generateMockAlerts = () => {
    alerts.value = [
        {
            id: '1',
            level: 'warning',
            type: '大风预警',
            title: '大风黄色预警',
            description: '预计未来6小时内将出现6-8级大风，阵风可达9级，请注意防范。',
            location: '北京市、天津市、河北省',
            time: new Date(),
            validUntil: new Date(Date.now() + 6 * 60 * 60 * 1000),
            isRead: false,
            protectionAdvice: [
                '关好门窗，加固围板、棚架、广告牌等易被风吹动的搭建物',
                '妥善安置易受大风影响的室外物品',
                '行人注意尽量少骑自行车，刮风时不要在广告牌、临时搭建物等下面逗留',
                '有关部门和单位注意森林、草原等防火'
            ],
            relatedLinks: [
                { title: '气象局官网', url: '#' },
                { title: '应急管理部', url: '#' }
            ]
        },
        {
            id: '2',
            level: 'danger',
            type: '暴雨预警',
            title: '暴雨红色预警',
            description: '预计未来3小时内降雨量将达100毫米以上，或者已达100毫米以上且降雨可能持续。',
            location: '广东省广州市、深圳市',
            time: new Date(Date.now() - 30 * 60 * 1000),
            validUntil: new Date(Date.now() + 3 * 60 * 60 * 1000),
            isRead: false,
            protectionAdvice: [
                '停止集会、停课、停业（除特殊行业外）',
                '做好山洪、滑坡、泥石流等灾害的防御和抢险工作',
                '相关地区应当注意防范强降水可能引发的山洪、地质灾害',
                '交通管理部门应当根据路况在强降雨路段采取交通管制措施'
            ],
            relatedLinks: [
                { title: '广东省气象局', url: '#' },
                { title: '防汛抗旱指挥部', url: '#' }
            ]
        },
        {
            id: '3',
            level: 'info',
            type: '雾霾预警',
            title: '雾霾蓝色预警',
            description: '预计未来24小时内可能出现能见度小于5000米的雾，或者已经出现并将持续。',
            location: '河北省石家庄市、唐山市',
            time: new Date(Date.now() - 2 * 60 * 60 * 1000),
            validUntil: new Date(Date.now() + 22 * 60 * 60 * 1000),
            isRead: true,
            protectionAdvice: [
                '驾驶人员注意雾的变化，小心驾驶',
                '机场、高速公路、轮渡码头等单位加强交通管理，保障安全',
                '减少户外活动，外出时佩戴口罩',
                '注意交通安全'
            ],
            relatedLinks: [
                { title: '河北省气象局', url: '#' },
                { title: '空气质量监测', url: '#' }
            ]
        }
    ]
}

// 刷新预警
const refreshAlerts = () => {
    // 这里应该调用真实的API
    console.log('刷新天气预警...')
}

// 获取预警数量
const getAlertCount = (level: string) => {
    return alerts.value.filter(alert => alert.level === level).length
}

// 获取预警级别文本
const getAlertLevelText = (level: string) => {
    const levelMap = {
        'info': '蓝色预警',
        'warning': '黄色预警',
        'orange': '橙色预警',
        'danger': '红色预警'
    }
    return levelMap[level as keyof typeof levelMap] || '未知预警'
}

// 格式化时间
const formatDateTime = (date: Date) => {
    return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

// 标记已读
const markAsRead = (id: string) => {
    const alert = alerts.value.find(a => a.id === id)
    if (alert) {
        alert.isRead = true
    }
}

// 关闭预警
const dismissAlert = (id: string) => {
    alerts.value = alerts.value.filter(alert => alert.id !== id)
}

// 显示预警详情
const showAlertDetail = (alert: WeatherAlert) => {
    selectedAlert.value = alert
    showDetailModal.value = true
    markAsRead(alert.id)
}

// 关闭详情模态框
const closeDetailModal = () => {
    showDetailModal.value = false
    selectedAlert.value = null
}
</script>

<style scoped>
.weather-alert-notification {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.alert-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.alert-icon {
    font-size: 1.8rem;
}

.alert-controls {
    display: flex;
    gap: 10px;
}

.refresh-btn,
.auto-refresh-btn {
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.refresh-btn:hover,
.auto-refresh-btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.auto-refresh-btn.active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

/* 预警统计 */
.alert-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.summary-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.summary-icon {
    font-size: 2rem;
}

.summary-content {
    flex: 1;
}

.summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.summary-label {
    font-size: 0.9rem;
    color: #666;
}

/* 预警列表 */
.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.no-alerts {
    text-align: center;
    padding: 40px;
    color: #666;
}

.no-alerts-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

.no-alerts-text {
    font-size: 1.1rem;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border-radius: 10px;
    background: white;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alert-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.alert-item.info {
    border-left: 4px solid #17a2b8;
}

.alert-item.warning {
    border-left: 4px solid #ffc107;
}

.alert-item.orange {
    border-left: 4px solid #fd7e14;
}

.alert-item.danger {
    border-left: 4px solid #dc3545;
}

.alert-level-badge {
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

.alert-level-badge.info {
    background: #17a2b8;
}

.alert-level-badge.warning {
    background: #ffc107;
    color: #333;
}

.alert-level-badge.orange {
    background: #fd7e14;
}

.alert-level-badge.danger {
    background: #dc3545;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.alert-description {
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}

.alert-meta {
    display: flex;
    gap: 20px;
    font-size: 0.8rem;
    color: #999;
}

.alert-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.action-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.read-btn:hover {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.dismiss-btn:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

/* 模态框样式 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 15px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #eee;
}

.modal-title {
    margin: 0;
    color: #333;
    font-size: 1.3rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 25px;
}

.detail-section {
    margin-bottom: 25px;
}

.detail-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.1rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.detail-label {
    font-weight: 500;
    color: #666;
}

.detail-value {
    font-weight: 600;
    color: #333;
}

.detail-value.info {
    color: #17a2b8;
}

.detail-value.warning {
    color: #ffc107;
}

.detail-value.orange {
    color: #fd7e14;
}

.detail-value.danger {
    color: #dc3545;
}

.detail-description {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.protection-list {
    margin: 0;
    padding-left: 20px;
    color: #666;
    line-height: 1.6;
}

.protection-list li {
    margin-bottom: 8px;
}

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.link-item {
    padding: 8px 16px;
    background: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.link-item:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .weather-alert-notification {
        padding: 20px;
    }

    .alert-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .alert-controls {
        justify-content: center;
    }

    .alert-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .alert-item {
        flex-direction: column;
        gap: 10px;
    }

    .alert-meta {
        flex-direction: column;
        gap: 5px;
    }

    .alert-actions {
        flex-direction: row;
        justify-content: center;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}
</style>